<template>
    <section id="About">
        <main>
            <article>
                <img src="../../assets/image/lawzhuo.jpg" alt="">
            </article>
            <section>
                <!-- <aside>随笔浅谈</aside>
                <span>常说兴趣是最后的老师，但很少有人真正能找到自己的兴趣，兴趣这东西很微妙，可以是某个大事件，也可能是某个一闪而过的点子，当我在IDE输入print('hello, world')，电脑反馈时，我知道，这就是我的所爱，确实也改变了我的人生，很多人会觉得我是后悔了，曾经没有好好读书，现在突然努力了，事实上，是因为我找到了兴趣，格局打开了，曾经觉得不可能的事，现在发现只要足够努力，并非不可能做到；</span> -->
                <aside>成为一名前端工程师需要掌握什么</aside>
                <p class="content">
                    <span>1. 使用HTML+CSS，精准还原设计稿，制作符合要求的页面；</span>
                    <span>2. 使用javascript处理数据，DOM操作和ajax请求；</span>
                    <span>3. 掌握vue，react或其他框架至少一个，大部分公司都使用成熟的框架进行高效开发；</span>
                    <span>4. 掌握webpack，vite打包工具；</span>
                    <span>5. SASS/LESS 等 CSS 预编译工具；</span>
                    <span>6. 熟练使用模块化开发，同异步操作，深浅拷贝等重要的ES6语法</span>
                    <span>7. 掌握TypeScript语言 （前端技术栈趋势，将来会必备）</span>
                    <span>8. 掌握微信小程序开发技术，能使用uniapp进行移动端混合开发</span>
                    <span>9. 掌握可视化图标技术，如 eCharts， three3等 （前端技术栈趋势，将来会必备）</span>
                    <span>10. 掌握axios库，封装请求接口</span>
                    <span>11. 了解node.js, npm机制，熟练掌握模块化开发思想；</span>
                    <span>12. 干掉js三大疑难：原型，同异步，闭包；</span>
                    <span>13. 掌握ElementUI，Vant等组件库</span>
                </p>
            </section>
        </main>
    </section>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
    setup() {
        return {};
    }
});
</script>

<style scoped lang="scss">
#About {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    main {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 80%;
        height: 100%;
        article {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 1rem;
            width: 18%;
            height: 50%;
            box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
            box-sizing: border-box;
            border-radius: 0.4rem;
            img {
                width: 6rem;
                height: 5rem;
                border-radius: 0.5rem;
            }
        }
        section {
            width: 60%;
            height: 70%;
            margin: 16px 0;
            padding: 1rem;
            // background-color: #ecf0f3;
            transition: all 0.25s ease-in-out;
            border-radius: 0.4rem;
            box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
            background: transparent;

            overflow-y: scroll;
            aside {
                margin-bottom: 1rem;
                font-size: 1rem;
                color: #222;
                font-weight: 700;
            }
            .content {
                width: 100%;
                display: flex;
                flex-direction: column;
                span {
                    font-size: 0.8rem;
                    line-height: 1.2rem;
                }
            }
        }
    }
}

@media (max-width: 1024px) {
    #Home {
        .home-main {
            top: 26%;
            left: 15%;
            .home-image {
                img {
                    width: 5rem;
                    height: 5rem;
                }
            }
            .home-content {
                h2 {
                    font-size: 1.1rem;
                }
            }
        }
    }
}
@media screen and (min-width: 1024px) and (max-width: 1680px) {
    #Home {
        .home-main {
            top: 32%;
            left: 15%;
            display: flex;
            .home-image {
                margin-right: 3rem;
            }
            .home-content {
                margin-top: 1.5rem;
            }
            .home-btn {
                padding: 0.8rem 1.5rem 1rem;
            }
        }
    }
}
@media (min-width: 1680px) {
    #Home {
        .home-main {
            top: 35%;
            left: 25%;
            display: flex;
            .home-image {
                margin-right: 3rem;
            }
            .home-content {
                margin-top: 1.5rem;
            }
            .home-btn {
                padding: 0.8rem 1.5rem 1rem;
            }
        }
    }
}
</style>
